<template>
  <!-- 1.获取元素 -->
  <div ref="titleRef">我是标题</div>
  <button ref="btnRef">按钮</button>

  <!-- 2.获取组件实例 -->
  <get-el-dom-ref ref="getElDomRef"></get-el-dom-ref>

  <button @click="getElements">获取元素DOM</button>
</template>

<script>
  import { ref, onMounted } from 'vue'
  import GetElDomRef from './GetElDomRef.vue'

  export default {
    components: {
      GetElDomRef
    },
    setup() {
      const titleRef = ref()
      const btnRef = ref()
      const getElDomRef = ref()

      // mounted的生命周期函数
      onMounted(() => {
        // console.log(titleRef.value)
        // console.log(btnRef.value)
        // console.log(showInfoRef.value)
        // showInfoRef.value.showInfoFoo()
      })

      function getElements() {
        console.log(titleRef.value)
        console.log(btnRef.value)
        console.log(getElDomRef.value)
        getElDomRef.value.getElDomRefFn()
      }

      return {
        titleRef,
        btnRef,
        getElDomRef,
        getElements
      }
    }
  }
</script>

<style scoped>
</style>

